<template>
  <div class="main clearfix">
    <div>
      <section class="section_wrap">
        <!-- 筛选框! -->
        <el-form
          style="text-align: left"
          :model="query"
          :inline="true"
          ref="searchFrom"
        >
          <el-form-item label="关键字" prop="keyword">
            <el-input
              placeholder="请输入姓名电话号码等"
              v-model="query.keyWord"
            ></el-input>
          </el-form-item>
          <el-form-item label="推广人" prop="extensionName">
            <el-input
              placeholder="请输入推广人"
              v-model="query.extensionName"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="agentType">
            <el-select v-model="query.agentType" placeholder="请选择">
              <el-option
                v-for="item in cityData"
                :key="item.itemValue"
                :label="item.itemText"
                :value="item.itemValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="产品" prop="productId">
            <el-select v-model="query.productId" placeholder="请选择">
              <el-option
                v-for="item in productData"
                :key="item.id"
                :label="item.productName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="query.status" placeholder="请选择">
              <el-option
                v-for="item in statusData"
                :key="item.id"
                :label="item.contentText"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <el-button type="danger" @click="emptyData">清空</el-button>
          </el-form-item>
        </el-form>
        <span style="float: right; line-height: 18px; margin-top: 10px"
          >您有<b
            ><el-badge :value="UntreatedData" :max="99" class="item">
            </el-badge></b
          >条未做处理</span
        >
        <!-- 列表数据! -->
        <el-table :data="records" border style="width: 100%">
          <el-table-column
            align="center"
            fixed
            label="序号"
            type="index"
            :reserve-selection="true"
            width="50"
            class-name="checkBox"
          ></el-table-column>
          <el-table-column prop="name" label="姓名" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号码"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cityName"
            label="城市"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="region"
            label="房产地区"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="提交时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="applyMoney"
            label="申请金额(万元)"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="evaluateQuota"
            label="初评额度"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="extensionName"
            label="推广人"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="applyFromStatus"
            label="贷款申请来源"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.applyFromStatus == 0">小程序</span>
              <span v-if="scope.row.applyFromStatus == 1">移动端官网</span>
              <span v-if="scope.row.applyFromStatus == 2">H5页面</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="申请类型" width="150" align="center">
            <template slot-scope="scope">
               <span v-if="scope.row.fromStatus == -1">仅申请</span>
              <span v-if="scope.row.fromStatus == 0">仅测额</span>
              <span v-if="scope.row.fromStatus == 1">申请提额</span>
              <span v-if="scope.row.fromStatus == 2">申请调额</span>
              <span v-if="scope.row.fromStatus == 3">H5页面</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusName"
            label="状态名"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <!-- slot-scope="scope" -->
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="detailsData(scope.row)"
                >详情</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="turnOrder(scope)"
                v-if="scope.row.status == 0"
                >转为订单</el-button
              >
              <!-- <span>{{ scope }}</span> -->
              <el-button type="text" size="small" @click="note(scope)"
                >修改备注</el-button
              >
              <!-- <el-button type="text" size="small" @click="deleteData(scope)"
                >删除</el-button
              > -->
              <el-popconfirm
                title="确定删除这条数据么？"
                @onConfirm="deleteData(scope.row)"
              >
                <el-button slot="reference" type="text" style="color: red"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 转为订单弹窗! -->
        <el-dialog
          :modal-append-to-body="false"
          title="转为订单"
          :visible.sync="isOrder"
          width="30%"
        >
          <el-form label-width="180px" ref="orderForm">
            <el-form-item label="归属公司" prop="company">
              <el-select
                v-model="tbQuickApplyVo.company"
                clearable
                placeholder="请选择"
                @change="ace"
              >
                <el-option
                  v-for="item in BelongsCompany"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属部门" prop="departmentID">
              <el-select
                clearable
                placeholder="请选择"
                @change="queryPersonnel"
                v-model="tbQuickApplyVo.departmentID"
              >
                <el-option
                  v-for="item in department"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="归属人员">
              <el-select
                clearable
                placeholder="请选择"
                filterable
                v-model="tbQuickApplyVo.belongId"
                @change="belongData"
              >
                <el-option
                  v-for="item in personnelArray"
                  :key="item.id"
                  :label="item.employeeName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="产品列表">
              <el-select
                clearable
                placeholder="请选择"
                v-model="tbQuickApplyVo.productId"
              >
                <el-option
                  v-for="item in productArray"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="determineOrder">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改备注弹窗! -->
        <el-dialog
          title="修改备注"
          :visible.sync="dialogVisible"
          width="30%"
          :modal-append-to-body="false"
        >
          <el-form ref="tbQuickApply" :model="tbQuickApply" label-width="80px">
            <el-form-item label="备注:">
              <el-input v-model="tbQuickApply.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="noteSubmit">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 详情弹窗! -->
        <el-dialog
          title="详情"
          :visible.sync="dialogVisibleDetails"
          width="50%"
          :modal-append-to-body="false"
        >
          <p class="TitleClass">客户相关信息</p>
          <table border="1" width="100%">
            <tr>
              <th class="spanClass">姓名</th>
              <th class="thStyle">{{ formList.name }}</th>
              <th class="spanClass">手机号码</th>
              <th class="thStyle">{{ formList.phone }}</th>
            </tr>
            <tr>
              <th class="spanClass">婚姻状况</th>
              <th class="thStyle">{{ formList.marriageInfo }}</th>
              <th class="spanClass">个人类型</th>
              <th class="thStyle">{{ formList.personType }}</th>
            </tr>
            <tr>
              <th class="spanClass">申请金额</th>
              <th class="thStyle">{{ formList.applyMoney }}</th>
              <th class="spanClass">初评额度(元)</th>
              <th class="thStyle">{{ formList.evaluateQuota }}</th>
            </tr>
            <tr>
              <th class="spanClass">推广人</th>
              <th class="thStyle">{{ formList.extensionName }}</th>
              <th class="spanClass">签约类型</th>
              <th class="thStyle">{{ formList.signType }}</th>
            </tr>
            <tr>
              <th class="spanClass">申请类别</th>
              <th class="thStyle">
                <template>
                  <span v-if="formList.fromStatus == 0">仅测额</span>
                  <span v-if="formList.fromStatus == 1">申请提额</span>
                  <span v-if="formList.fromStatus == 2">申请调额</span>
                  <span v-if="formList.fromStatus == 3">H5页面</span>
                  <span v-else></span>
                </template>
              </th>
              <th class="spanClass">状态</th>
              <th class="thStyle">
                <template>
                  <span v-if="formList.status == 0">待跟进</span>
                  <span v-if="formList.status == 1">已跟进</span>
                  <span v-else></span>
                </template>
              </th>
            </tr>
            <tr>
              <th class="spanClass">创建时间</th>
              <th colspan="3">{{ formList.createTime }}</th>
            </tr>
          </table>

          <p class="TitleClass">房产相关信息</p>
          <table border="1" width="100%">
            <tr>
              <th class="spanClass">城市</th>
              <th class="thStyle">{{ formList.cityName }}</th>
              <th class="spanClass">房产地区</th>
              <th class="thStyle">{{ formList.region }}</th>
            </tr>
            <tr>
              <th class="spanClass">小区名</th>
              <th class="thStyle">{{ formList.housingEstate }}</th>
              <th class="spanClass">建成年代(年)</th>
              <th class="thStyle">{{ formList.builtYear }}</th>
            </tr>
            <tr>
              <th class="spanClass">面积㎡</th>
              <th class="thStyle">{{ formList.area }}</th>
              <th class="spanClass">楼层(层)</th>
              <th class="thStyle">{{ formList.floorNum }}</th>
            </tr>

            <tr>
              <th class="spanClass">房屋类别</th>
              <th class="thStyle">{{ formList.houseType }}</th>
              <th class="spanClass">房屋性质</th>
              <th class="thStyle">{{ formList.houseNature }}</th>
            </tr>
            <tr>
              <th class="spanClass">是否有抵押</th>
              <th class="thStyle">
                <template>
                  <span class="indexClass" v-if="formList.isMortgage == 0"
                    >否</span
                  >
                  <span class="indexClass" v-if="formList.isMortgage == 1"
                    >是</span
                  >
                  <span class="indexClass" v-else></span>
                </template>
              </th>
              <th class="spanClass">是否有二押</th>
              <th class="thStyle">
                <template>
                  <span class="indexClass" v-if="formList.haveSecondLoan == 0"
                    >否</span
                  >
                  <span class="indexClass" v-if="formList.haveSecondLoan == 1"
                    >是</span
                  >
                  <span class="indexClass" v-else></span>
                </template>
              </th>
            </tr>
            <tr>
              <th class="spanClass">一押贷款机构名称</th>
              <th class="thStyle">{{ formList.firstLoanName }}</th>
              <th class="spanClass">一押贷款余额(万元)</th>
              <th class="thStyle">{{ formList.firstLoanBalance }}</th>
            </tr>
            <tr>
              <td class="spanClass">房屋总价(万元)</td>
              <td class="thStyle" colspan="3">{{ formList.housingPrice }}</td>

              <!-- <td colspan="2"></td> -->
            </tr>
          </table>
        </el-dialog>

        <div class="pagination">
          <span class="title">小计：共{{ this.total }}条数据</span>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            :page-size="query.pageSize"
            :current-page.sync="query.pageNo"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
import {
  BusinessList,
  pagelist,
  departAdd,
  postCompanyEmployList,
  productList,
  orderTurn,
  noteModify,
  DataIdD,
  getCity,
  getProduct,
  getUntreated,
  getBusinessDepartment,
  detailsList,
} from "../../assets/js/api";
export default {
  data() {
    return {
      dialogVisibleDetails: false, //详情弹窗开关!
      isOrder: false, //转为订单弹窗开关!
      dialogVisible: false, //修改备注弹窗开关!
      deleteID: null, //删除按钮获取到该按钮的ID!
      UntreatedData: null, //未处理数据条数!
      //列表请求数据!
      query: {
        productId: null, //产品!
        agentType: null, //城市!
        extensionName: null, //推广人!
        keyWord: null, //姓名电话等!
        pageNo: 1, //当前页码!
        pageSize: 10, //每页数据条数!
        status: null, //待跟进状态码!
      },

      formList: {}, //详情按钮数据!
      cityData: [], //筛选框城市下拉框数据!
      productData: [], //筛选产品下拉框数据!
      records: [], //列表数据详情!
      total: null, //数据总条数!
      //转为订单所需要的参数!
      tbQuickApplyVo: {
        departmentID: null, //所在公司部门的ID!
        name: null, //姓名!
        phone: null, //手机号码!
        cityName: null, //城市!
        productName: null, //产品名称!
        productId: null, //产品ID!
        applyMoney: null, //申请金额!
        extensionName: null, //推广人!
        remark: null, //备注!
        statusName: null, //状态名!
        createTime: null, //创建时间!
        extensionId: null, //推广人ID!
        id: null, //数据ID!
        belongId: null, //归属人员ID!
        company: null, //绑定的所在公司id!
      },
      BelongsCompany: [], //所属公司数组!
      // 筛选框状态码!
      statusData: [
        {
          id: 0,
          contentText: "待跟进",
        },
        {
          id: 1,
          contentText: "已跟进",
        },
      ],

      department: [], //所在公司部门的数组!

      personnelArray: [], //归属人员数组!
      productArray: [], //转为订单-产品列表!
      //修改备注所需要的参数!
      tbQuickApply: {
        id: null, //该条数据的ID!
        remark: null, //备注框!
      },
    };
  },
  created() {
    this.obtainList();
    this.getagentType();
    this.getProductId();
    this.getUntreatedData();
  },
  methods: {
    // 转为订单弹出层的取消按钮!
    cancel() {
      this.$refs.orderForm.resetFields();
      this.isOrder = false;

      // this.tbQuickApplyVo.company = null; //所在公司id!
      // this.tbQuickApplyVo.departmentID = null; //所在部门id!
      // this.tbQuickApplyVo.belongId = null; //归属人员id!
    },
    // 详情按钮!
    detailsData(data) {
      this.dialogVisibleDetails = true;
      detailsList(data.id).then((res) => {
        this.formList = res.data;
        this.formList.extensionName = data.extensionName;
      });
    },
    //获取未处理条数!
    getUntreatedData() {
      getUntreated().then((res) => {
        this.UntreatedData = res.data;
      });
    },
    //筛选框获取城市数据列表!
    getagentType() {
      getCity().then((res) => {
        this.cityData = res.data;
      });
    },
    //筛选框获取城市数据列表!
    getProductId() {
      getProduct().then((res) => {
        this.productData = res.data;
      });
    },
    //获取商机列表数据!
    obtainList() {
      BusinessList(this.query).then((res) => {
        // debugger;
        this.records = res.data.records;
        //姓名!

        this.query.pageSize = res.data.size; //
        this.total = res.data.total; //数据总条数!
      });
    },
    // 筛选框搜索按钮!
    searchData() {
      this.query.pageNo = 1;
      this.obtainList();
    },
    //筛选框清空按钮!
    emptyData() {
      this.query.productId = "";
      this.query.agentType = "";
      this.query.extensionName = "";
      this.query.keyWord = "";
      this.query.status = "";
      this.obtainList();
    },
    handleSizeChange(newSize) {
      this.query.pageSize = newSize;
      this.obtainList();
    },
    handleCurrentChange(newNum) {
      this.query.pageNo = newNum;
      this.obtainList();
    },
    // 转为订单按钮操作!
    async turnOrder(e) {
      this.department = [];
      this.personnelArray = [];
      this.BelongsCompany = [];
      this.productArray = [];
      this.tbQuickApplyVo.company = null; //所在公司id!
      this.tbQuickApplyVo.departmentID = null; //所在部门id!
      this.tbQuickApplyVo.belongId = null; //归属人员id!
      this.tbQuickApplyVo.productId = null; //产品!
      // this.tbQuickApplyVo.applyMoney = e.row.applyMoney; //申请金额!
      // this.tbQuickApplyVo.cityName = e.row.cityName; //城市!·
      // this.tbQuickApplyVo.phone = e.row.phone; //手机号!
      // this.tbQuickApplyVo.productId = e.row.productId; //产品ID!
      // this.tbQuickApplyVo.productName = e.row.productName; //产品名字!
      // this.tbQuickApplyVo.remark = e.row.remark; //备注!
      // this.tbQuickApplyVo.status = e.row.status; //状态!
      // this.tbQuickApplyVo.statusName = e.row.statusName; //状态名!
      // this.tbQuickApplyVo.createTime = e.row.createTime; //创建时间!
      // this.tbQuickApplyVo.extensionId = e.row.extensionId; //推广人ID!
      // this.tbQuickApplyVo.id = e.row.id; //数据ID!
      this.tbQuickApplyVo = e.row;

      this.isOrder = true; //打开弹窗!
      // 查询所有公司接口!

      if (e.row.extensionId == null) {
        this.tbQuickApplyVo.departmentID = null;
        pagelist().then((res) => {
          this.BelongsCompany = res.data;
        });
        //  产品列表!
        productList().then((res) => {
          this.productArray = res.data;
        });
        return;
      } else {
        // //获取推广人所在部门!
        const res = await getBusinessDepartment(e.row.extensionId);
        this.tbQuickApplyVo.company = res.data.cid; //所在公司id!
        this.tbQuickApplyVo.departmentID = res.data.did; //所在部门id!
        this.tbQuickApplyVo.belongId = res.data.eid; //归属人员id!
        pagelist().then((res) => {
          this.BelongsCompany = res.data;
        });

        //查询该公司归属部门!
        departAdd(this.tbQuickApplyVo.company).then((res) => {
          this.department = res.data;
        });

        // 查询归属人员!
        postCompanyEmployList(this.tbQuickApplyVo.belongId).then((res) => {
          this.personnelArray = res.data;
        });

        //  产品列表!
        productList().then((res) => {
          this.productArray = res.data;
        });
      }
    },
    //修改备注按钮操作!
    note(e) {
      this.dialogVisible = true;

      this.tbQuickApply.id = e.row.id;
      this.tbQuickApply.remark = e.row.remark; //备注!
    },
    ace(e) {
      //查询该公司归属部门!
      this.tbQuickApplyVo.company = e;
      departAdd(this.tbQuickApplyVo.company).then((res) => {
        this.department = res.data;
      });
    },
    //查询归属人员!
    queryPersonnel(e) {
      this.departmentID = e; //所选部门ID!
      postCompanyEmployList(e).then((res) => {
        this.personnelArray = res.data;
      });
    },
    //获取归属人ID!
    belongData(e) {
      this.tbQuickApplyVo.belongId = e;
    },
    //转为订单里面的确定按钮方法!
    determineOrder() {
      if (
        this.tbQuickApplyVo.belongId == null ||
        this.tbQuickApplyVo.productId == null ||
        this.tbQuickApplyVo.belongId == "" ||
        this.tbQuickApplyVo.productId == ""
      ) {
        this.$message.error("归属人员和归属产品不能为空!");
        return;
      } else {
        orderTurn(this.tbQuickApplyVo).then((res) => {
          var msg = res.message;
          if (res.code == 200) {
            this.$message({ message: msg, type: "success" });
          } else this.$message({ message: msg, type: "warning" });
          this.isOrder = false;
          this.obtainList();
          this.getUntreatedData();
        });
      }
    },
    //修改备注里面的确定按钮方法!
    noteSubmit() {
      noteModify(this.tbQuickApply).then((res) => {
        var msg = res.message;
        if (res.code == 200) {
          this.$message({ message: msg, type: "success" });
        } else {
          this.$messgae({ messgae: msg, type: "error" });
        }
        this.dialogVisible = false;
        this.obtainList();
      });
    },

    //删除弹出窗里面的确定按钮!
    deleteData(row) {
      DataIdD({ params: { id: row.id } }).then((res) => {
        var msg = res.message;
        if (res.code == 200) {
          this.$message({ message: msg, type: "success" });
          this.obtainList();
          this.getUntreatedData();
        } else {
          this.$message({ message: msg, type: "error" });
        }
      });
    },
  },
};
</script>

<style scoped type="less">
::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
  padding: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  top: 20px;
  left: 0;
  color: rgba(51, 51, 51, 1);
}

.boxStyle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;
}

.indexStyle {
  width: 33.33%;
  height: 24px;
  border: 1px solid #797979;
}
.spanClass {
  width: 25%;

  /* text-align: center; */

  text-align: left;
  background-color: #f3f9ff;
}
.thStyle {
  width: 25%;
  text-align: left;
}
.indexClass {
  display: inline-block;
  width: 49%;
}
.TitleClass {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
</style>
